// 0、 保存传入的 Vue
let Vue

// 模拟 VueRouter
class VueRouter {
  constructor (options) {
    this.$options = options

    // 将 current 转为响应式数据
    // 改变 current 将会触发 router-view 的 render 函数能够重新渲染
    const initial = window.location.hash.slice(1) || '#'
    Vue.util.defineReactive(this, 'current', initial)
    // this.current = '/'

    // 开启hash监听
    window.addEventListener('hashchange', () => {
      this.current = window.location.hash.slice(1)
    })
  }
}

// vue 插件必须要有一个 install 方法，会在 Vue.use 时候被调用
VueRouter.install = function (_Vue) {
  Vue = _Vue

  // 1、 给每一个子组件挂载 $router 属性（this.$router），通过全局混入
  // 全局混入的目的是：延迟下面的逻辑到 router 创建完毕并且附加到选项上时才执行
  Vue.mixin({
    beforeCreate () {
      // 根示例才有该选项
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router
      }
    }
  })

  // 2、 注册两个内置组件 router-link、 router-view
  Vue.component('router-link', {
    props: {
      to: {
        type: String,
        required: true
      }
    },
    render (h) {
      return h(
        'a',
        {
          attrs: {
            href: '#' + this.to
          }
        },
        this.$slots.default
      )
    }
  })
  Vue.component('router-view', {
    render (h) {
      // 获取当前路由对应的组件
      let component = null
      const route = this.$router.$options.routes.find(route => {
        return route.path === this.$router.current
      })
      if (route) {
        component = route.component
      }

      return h(component)
    }
  })
}

export default VueRouter
